<script setup lang="ts">
import { ref, onBeforeMount, inject, onUnmounted, onUpdated } from 'vue'
import Comment from './Comment.vue';
import { getComments, commentCreate, getCommentsByLikes } from '@api';
import { popMessageKey, popMessage, switchLoginModelShowKey, PageInfo, Comment as c } from '@/type';
import { useStore } from '../../stores/index';
import defaultAvatar from '../../assets/user.svg'
import { storeToRefs } from 'pinia';
import CommonPagenation from '@components/Common/CommonPagenation.vue';
const showLoginModel = inject(switchLoginModelShowKey) as () => void
const store = useStore()
const { loginState } = storeToRefs(store)
const comment = ref('')
const props = defineProps<{
    myMusic: boolean,
    type: string,
    typeId: string
}>()

const commentList = ref<PageInfo<c>>()
const commentListBylikes = ref<any[]>([])
const currentPage = ref(1)
// 活动的typeId 用来校验更新
let nowTypeId = "-1";
const popMessage = inject(popMessageKey) as popMessage
const BASEURL = store.getBaseUrl()
const avatar = storeToRefs(store).getUserAvatar
const commentNums = storeToRefs(store).getCommentNums
const empty = ref(false)
const changePage = (types: number | 'next' | 'last') => {
    switch (types) {
        case 'next':
            currentPage.value++
            break;
        case 'last':
            currentPage.value--
            break;
        default:
            currentPage.value = types
            break;
    }
    getCommentList()
}
const updateList = () => {
    getCommentList()
}
const getCommentList = () => {
    getComments(props.typeId, props.type, currentPage.value, 10).then((res) => {
        if (res.data.code == 1) {
            console.log(res.data);
            if (res.data.data == null) {
                store.setCommentNum(0)
                empty.value = true
                return
            }
            commentList.value = res.data.data
            // 更新评论数
            store.setCommentNum(commentList.value?.total as number)
            empty.value = false
        }
    })
    getCommentsByLikes(props.typeId, props.type).then(res => {
        if (res.data.code == 1) {
            if (res.data.data != null) {
                commentListBylikes.value = res.data.data.list
            } else {
                commentListBylikes.value = []
            }
        }
    })
}
onBeforeMount(() => {
    updateComments()
    nowTypeId = props.typeId;
})
onUpdated(() => {
    if (nowTypeId != props.typeId) {
        nowTypeId = props.typeId;
        updateComments()
    }
})
// 卸载时让评论数归零
onUnmounted(() => {
    store.setCommentNum(0)
})
const postComment = () => {
    if (!checkLogin()) {
        return
    }
    const p = commentCreate(comment.value, props.type, props.typeId);
    p.then(res => {
        if (res.data.code == 1) {
            popMessage('成功评论', 'success')
            comment.value = ''
            updateComments()
        }
    })
}

const updateComments = () => {
    getCommentList()
}
const checkLogin = () => {
    if (loginState.value != 1) {
        popMessage('请先登录', 'error')
        showLoginModel()
        return false
    }
    return true
}
onUpdated(() => {
    if (nowTypeId != props.typeId) {
        if (commentList.value) commentList.value.pages = -1;
        updateComments()
        nowTypeId = props.typeId
    }
})
</script>
<template>
    <div id="comment" :class="{ commentList_: props.myMusic, commentList: !props.myMusic }">
        <div class="title">
            <h2>评论</h2>
            <!-- props.musicList.length -->
            <span>共{{ commentNums }}条评论</span>
        </div>
        <div class="myComment">
            <!-- 评论头像 -->
            <div class="input">
                <img class="avatar"
                    :src="avatar == '' || avatar == undefined ? defaultAvatar : BASEURL + '/static/image/' + avatar" alt="">
                <textarea class="commentInput" v-model="comment" @click="checkLogin"></textarea>
            </div>
            <div class="send">
                <span class="commentNums">{{ 140 - comment.length }}</span>
                <a class="sendComment" @click="postComment">
                    <span style="color: white;font-size: 14px;margin-left: 2px;">评论</span>
                </a>
            </div>
        </div>
        <template v-if="!empty">
            <div v-if="currentPage < 2" class="wonderful">
                <h3>精彩评论</h3>
            </div>
            <Comment :update="updateList" :typeId="props.typeId" :type="props.type" :comments="commentListBylikes"
                :update-like="updateList" />
            <div class="new" v-if="commentList">
                <h3>最新评论</h3>
            </div>
            <Comment :update="updateList" :typeId="props.typeId" :type="props.type" :update-like="updateList"
                :comments="(commentList?.list as c[])" />
        </template>
        <CommonPagenation v-if="commentList && commentNums > 0" :page-info="commentList" :current-page="currentPage"
            :change-page="changePage" />
    </div>
</template>
<style scoped lang="css">
.myComment {
    margin-bottom: 70px;
}

.new {
    margin-top: 40px;
}

.new,
.wonderful {
    border-bottom: 1px solid #cfcfcf;
}

.new h3,
.wonderful h3 {
    margin: 0;
    padding-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
}

.sendComment {
    background-color: var(--blue-style);
    display: inline-flex;
    align-items: center;
    padding: 1px 10px;
    border-radius: 5px;
    height: 30px;
    cursor: pointer;
}

.sendComment:hover {
    background-color: var(--blue-style-hover);
}

.commentNums {
    font-size: 12px;
    color: #999;
    margin-right: 10px;
}

.send {
    margin-top: 10px;
    float: right;

}

.input {
    display: flex;
}

.commentInput {
    width: 100%;
    height: 50px;
    margin-left: 20px;
    resize: none;
    outline: none;
}

.avatar {
    height: 50px;
    width: 50px;
}

.commentList_ {
    padding: 45px 0 0 0;
    margin-bottom: 100px;
}

.commentList {
    padding: 45px 30px 0px 40px;
    margin-bottom: 100px;
}

.title {
    display: flex;
    height: 30px;
    align-items: baseline;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--red-style);
}

.title span {
    margin-left: 20px;
    font-size: 12px;
    color: #666;
}

.title h2 {
    font-weight: normal;
    margin: 0 10px 0 0;
    font-size: 20px;
}
</style>